import { useEffect, useState, useRef } from 'react'
import { SearchBar, Dropdown, Radio, Space, List, Image, Toast, Popup } from 'antd-mobile'
import { AddSquareOutline, FilterOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { meetingPage, meetingType } from '@api'
import './index.scss'

const Meeting = () => {
    const navigate = useNavigate()

    const ref = useRef(null)

    const typeModalStyle = { height: '40vh', padding: '20px', boxSizing: 'border-box', borderRadius: '0 0 15px 15px' }

    // 关键词
    const [keyword, setKeyword] = useState('')

    // 时间范围
    const [timeRange, setTimeRange] = useState({ startDate: '', endDate: '' })

    const [params, setParams] = useState({ current: 1, size: 500, title: '', type: '' })

    // 筛选开关
    const [filterVisible, setFilterVisible] = useState(false)

    const [list, setList] = useState([])

    const [types, setTypes] = useState([])



    useEffect(() => {
        meetingType().then(({ success, data }) => {
            if (success) {
                setTypes(data)
            }
        })
    }, [])

    useEffect(() => {
        getData()
    }, [params])

    const getData = () => {
        meetingPage({ ...params, beginTime: timeRange.startDate ? `${timeRange.startDate} 00:00:00` : '', endTime: timeRange.endDate ? `${timeRange.endDate} 23:59:59` : '' }).then(({ success, data, info }) => {
            if (success) {
                setList(data?.records || [])
            } else {
                Toast.show(info)
            }
        })
    }

    const go = (item) => {
        localStorage.setItem('meetingItem', JSON.stringify(item))
        navigate(`details/${item.id}`)
    }

    // 关闭类型弹窗
    const closeTypeModal = () => {
        getData()
        setFilterVisible(false)
    }

    // 处理日期变更的函数
    const handleDateChange = (e) => {
        const { name, value } = e.target
        setTimeRange((prevDates) => ({
            ...prevDates,
            [name]: value
        }))
    }

    // 重置筛选
    const reset = () => {
        setTimeRange({ startDate: '', endDate: '' })
        setParams({ current: 1, size: 500, title: '', type: '', beginTime: "", endTime: "" })
        setFilterVisible(false)
    }

    return (
        <div className="Meeting">
            <div className="Meeting_head">
                <AddSquareOutline onClick={() => navigate('add')} fontSize={25} />
                <div className="Meeting_head_box">
                    <SearchBar clearable onChange={setKeyword} onBlur={() => setParams({ ...params, title: keyword })} value={keyword} placeholder="请输入标题关键字" />
                </div>
                <FilterOutline onClick={() => setFilterVisible(true)} fontSize={25} />
            </div>
            <List>
                {list.map((item) => (
                    <List.Item key={item.id} prefix={<Image src={item.firstImage} fit="cover" width={60} height={60} />} description={item.createTime} onClick={() => go(item)}>
                        <span style={{ fontWeight: 'bold' }}>{item.title}</span>
                    </List.Item>
                ))}
            </List>
            <Popup position="top" visible={filterVisible} onMaskClick={closeTypeModal} onClose={closeTypeModal} bodyStyle={typeModalStyle}>
                <div className="filter_box2">
                    <p className="filter_title">时间范围</p>
                    <div>
                        <input type="date" name="startDate" value={timeRange.startDate} onChange={handleDateChange} />
                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                        <input type="date" name="endDate" value={timeRange.endDate} onChange={handleDateChange} />
                    </div>
                    <p className="filter_title">类型</p>
                    <div className="filter_list">
                        {types.map((title) =>
                            title ? (
                                <p className={params.type === title ? "active" : ''} key={title} onClick={() => {
                                    setParams({ ...params, type: title })
                                }}>{title}</p>
                            ) : null
                        )}
                    </div>
                    <div className="type_btn">
                        <p onClick={reset}>重置</p>
                        <p onClick={closeTypeModal}>确认</p>
                    </div>
                </div>
            </Popup>
        </div>
    )
}
export default Meeting
